<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>弹性盒模型 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/30.c4a099d1.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="active sidebar-link">15-弹性盒模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/17-弹性盒模型.html#弹性盒模型" class="sidebar-link">弹性盒模型</a></li></ul></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="弹性盒模型"><a href="#弹性盒模型" class="header-anchor">#</a> 弹性盒模型</h2> <blockquote><p><strong>flex</strong></p></blockquote> <p><strong>作用:页面布局</strong></p> <p>我们使用<strong>弹性布局时父元素控制子元素的布局方案,不需要计算.</strong></p> <blockquote><p>就像我们军训一样,教官说小伙伴全部站在一起,大家向右看齐.</p> <p>我们自己把左右两边间隙调整到适当的位置,</p> <p>这样的话,我们所有的元素就会布局的非常的整齐了,</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">&lt;div class=&quot;bigbox&quot;&gt;
        &lt;div class=&quot;smallbox&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;smallbox&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;smallbox&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;smallbox&quot;&gt;2&lt;/div&gt;
    &lt;/div&gt;

.bigbox</span><span class="token punctuation">{</span>
  		<span class="token property">display</span><span class="token punctuation">:</span>flex<span class="token punctuation">;</span> <span class="token comment">/*父元素开启弹性盒模型*/</span>
		<span class="token property">width</span><span class="token punctuation">:</span>800px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
		<span class="token property">border</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span>   
		<span class="token punctuation">}</span>
 <span class="token selector">.smallbox</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
		<span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p><strong>这时候和之前的排列方向有什么区别?</strong></p> <blockquote><p>我们在没有写弹性盒模型的时候盒子是从上往下排.</p> <p>开启弹性盒模型现在是从左往右排.</p></blockquote> <div class="language-nginx line-numbers-mode"><pre class="language-nginx"><code><span class="token directive"><span class="token keyword">display:flex</span></span><span class="token punctuation">;</span>
开启弹性盒模型,内部所有的子元素不会按照普通流布局,听从父级的指挥,会按照从左往右依次排列.
这里默认是display:block-flex<span class="token punctuation">;</span>对外块元素,对内弹性盒模型
<span class="token directive"><span class="token keyword">display:block可以写成display:block-block</span></span><span class="token punctuation">;</span>对内表现为块元素,对外也表现为块元素


display:inline-block(对外表现为行内元素,对内表现为块元素).

display:flex还有另外一种写法叫做display:inline-flex(对外表现为行内元素,对内是弹性盒模型)
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><strong>弹性特点</strong>,</li></ul> <ol><li>指的是子元素盒子具有了弹性.从左往右排列.</li> <li>可以进行自动伸伸缩.元素如果超出一行的宽度,会挤到一起,等比例压缩</li> <li>默认不换行.,因为不知道换行朝哪里</li></ol> <p>现在网页上有四个盒子,四个盒子从右往右依次排列.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">大盒子只写display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token comment">/*现在打开开发者工具,将我们bigbox的宽度逐渐减小,这怎么回事,这里面小盒子没有换行,自动被挤压了,变小了.
仿佛这四个小盒子都具有了弹性,大丈夫能屈能伸说的就是我们弹性盒模型*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="弹性盒模型的两条轴线"><a href="#弹性盒模型的两条轴线" class="header-anchor">#</a> 弹性盒模型的两条轴线</h3> <blockquote><p>1,**弹性盒模型的轴,**这两个轴分别指什么呢?</p> <p>分别指的是<strong>元素的排列方向</strong>和<strong>元素的换行方向</strong></p> <p><strong>元素的排列方向(默认从左往右)</strong></p> <p>现在我们的smallbox他们的元素排列方向是朝哪的?<strong>从左往右,</strong></p> <p>那元素的排列方向最多有几个方向?</p> <p>从左往右,从右往左,从上往下 还有从下往上</p> <p><strong>最多有四个方向</strong>.</p> <p>弹性盒模型之所以很好用很弹性,你可以去制定规则,让它可以任意控制元素的排列方向,</p> <p><strong>元素排列方向就是的主轴方向</strong></p> <p>假如从左往右就是默认方向,那我们想要它从右往左呢,</p> <p><strong>元素的排列方向叫做flex-direction</strong></p> <p><strong>1.row(行)</strong> 横向<strong>从左往右</strong></p> <p>2.<strong>row-reverse</strong> 横向的反向 从右往左 主轴的方向变为<strong>从右到左</strong></p> <p>3.<strong>column(列)</strong> 纵向 <strong>从上往下</strong></p> <p>4.<strong>column-reverse</strong>  纵向的反向 <strong>从下往上</strong></p></blockquote> <blockquote><p><strong>弹性盒子：默认情况下，弹性盒模型的子元素高度与父元素一致</strong>,子元素相当于独占一列,</p> <p><strong>但是默认宽度为0（此处与普通的块级盒模型刚好相反）</strong></p></blockquote> <p><strong>元素的换行方向(默认不换行)</strong></p> <blockquote><p>那元素的换行方向是不是可以可以由主轴方向决定,</p> <p>元素排列方向也就是主轴方向从左往右开始排列.</p> <p>换行方向只可能有两个方向要么是朝下换行要么是朝上换行.</p> <p>如果主轴方向是竖直方向,竖直向上或竖直向下时.</p> <p>换行方向也只有两个,一个是向左一个是向右.</p> <p><strong>所以元素的换行方向是可以由主轴方向决定的,并且最多有三个情况(包括不换行)</strong></p></blockquote> <p>我们的换行方向用的单词叫做flex-wrap</p> <p><strong>我们给换行方向取一个名字叫交叉轴</strong></p> <p><strong>flex-wrap:nowrap(默认不换行.多出来元素挤在一堆)</strong></p> <p><strong>wrap(正常换行,只有向右和向下)</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token comment">/*正常换行,主轴方向从左往右,朝下换行.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse<span class="token punctuation">;</span><span class="token comment">/*朝下换行,此时元素的排列方向为从左往右*/</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token comment">/*此时12345678的盒子按照正常方向进行换行*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token comment">/*此时每一行都进行了换行,换行方向是向右的,放不下的元素都朝右去进行排列*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span>column-reverse<span class="token punctuation">;</span><span class="token comment">/*依然是从左往右换行,只是主轴方向是从下面往上面*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>如果换行子元素的宽高大于父元素,则会超出父元素的边界显示</strong></p> <p>但是还有一个值<strong>warp-rerverse(反向换行 只有向上或向左,具体由主轴进行决定)</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span>row<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse<span class="token punctuation">;</span>
<span class="token comment">/*换行方向为反向,元素由原来的从上往下换行变为从下往上进行换行,元素自然而然往下排列进行向上的换行*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span>column<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse<span class="token punctuation">;</span><span class="token comment">/*此时的换行方向变为由朝着右边换行变为朝着左边进行换行*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">flex-direction</span><span class="token punctuation">:</span>column-reverse<span class="token punctuation">;</span>
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse<span class="token punctuation">;</span><span class="token comment">/*依然朝着左边进行换行,但是元素的排列方向也就是主轴是从下往上的*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>wrap具体的换行方向由主轴决定</strong></p> <blockquote><p><strong>如果主轴方向是竖直方向</strong>(无论是向上还是向下),<strong>都会朝着右边进行换行,</strong></p> <p><strong>主轴是水平方向</strong>(无论向右还是向左),<strong>换行方向是往下的</strong></p></blockquote> <p><strong>flex-flow</strong></p> <blockquote><p>flex-flow：flex-direction flex-wrap;(两个属性的简写)</p></blockquote> <h3 id="主轴-元素排列方向-的布局方案"><a href="#主轴-元素排列方向-的布局方案" class="header-anchor">#</a> 主轴(元素排列方向)的布局方案</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.bigbox</span><span class="token punctuation">{</span>
		<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    	<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
    <span class="token comment">/*这时候元素的排列方向从左往右,也就是主轴朝向从左往右,交叉轴去进行正常换行.
       我们先来说说主轴的布局方案*/</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span>100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.smallbox</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 10px black inset<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;bigbox&quot;</span>&gt;
		&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;1&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;2&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;3&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;4&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;5&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;6&lt;/div&gt;
	&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><strong>主轴上的元素布局方案 justify-content:</strong></p> <p><strong>1.主轴的开始位置 flex-start:</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.bigbox</span><span class="token punctuation">{</span><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/*默认值 ,朝着左边进行对齐,在主轴的开始位置*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>2.主轴的结束位置  flex-end;</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.bigbox</span><span class="token punctuation">{</span><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">/*右对齐,在主轴的结束位置*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>如果把元素的排列方向(主轴朝向)改变</li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.bigbox</span><span class="token punctuation">{</span>
       <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
			<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
       <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
        <span class="token comment">/*此时主轴方向从上向下,而不是从左向右.
          换行方向向右,主轴开始的位置在上边,主轴结束的位置在下边,此时元素在主轴的结束*/</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong>3.元素在主轴上挤在一起居中  center</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token property">justify-content</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
<span class="token comment">/*上面四个元素作为整体留有空隙,下面两个元素作为整体留有空隙 
	现在无论增加或减少元素都能保证在主轴上面居中排列*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>4.散开</strong></p> <blockquote><p><strong>1.space-around(around是环绕的意思,每个flex子元素两侧都有互不干扰的等宽空白间距.最终视觉上子元素之间的间距只有子元素到父元素间距的一半)</strong></p></blockquote> <blockquote><p><strong>2.justify-content:space-between;(表现为两端对齐,between是中间的意思,只有子元素之间有空隙,并且均分)</strong></p></blockquote> <blockquote><p><strong>3.justify-content: space-evenly;(evenly是匀称平等的意思,最终子元素和父元素,子元素和子元素间距都一样</strong></p></blockquote> <h3 id="交叉轴-元素的换行方向-的布局方案"><a href="#交叉轴-元素的换行方向-的布局方案" class="header-anchor">#</a> 交叉轴(元素的换行方向)的布局方案</h3> <p><strong>弹性之一:不换行的时候元素在主轴会挤在一起</strong></p> <p><strong>弹性之二:元素在交叉轴方向上其实是有弹性的,当我们不设置高度的时候元素的高度会按照行数均分</strong></p> <p><strong>flex里的子元素不是普通的块元素,有自己的性质</strong></p> <blockquote><p><strong>默认主轴方向的长度是包裹的.</strong></p> <p><strong>交叉轴方向是等比例填充的.(align-items:stretch)</strong></p></blockquote> <ul><li><p><strong>交叉轴上的元素的对齐方式</strong></p> <p><strong>两种不同的场景</strong></p></li></ul> <p><strong>1.我们将主轴方向上面的多行元素看成一个整体</strong></p> <p><strong>此属性只在flex容器中有多行flex元素时才有作用.(使用flex-wrap)</strong></p> <p>换了两行就相当于有两个元素,这两个元素是怎么对齐?这是我们需要讨论的第一个特点,</p> <p><strong>整体与整体在交叉轴的对齐方式</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token property">flex-direction</span><span class="token punctuation">:</span>row<span class="token punctuation">;</span>
	<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
	<span class="token property">justify-content</span><span class="token punctuation">:</span>space-between<span class="token punctuation">;</span>
	<span class="token property">align-content</span><span class="token punctuation">:</span>stretch<span class="token punctuation">;</span>
<span class="token comment">/*默认交叉轴方向的长度是等比例填充的,如果元素换行后仍然有多余空间,元素会平分剩余空间
		如果子元素没有高度,元素则会拉伸到父元素的高度,每行平分父元素的高度*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">align-content</span><span class="token punctuation">:</span>flex-start<span class="token punctuation">;</span><span class="token comment">/*元素在交叉轴的开始位置排列*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">align-content</span><span class="token punctuation">:</span>flex-end<span class="token punctuation">;</span><span class="token comment">/*元素在交叉轴的结束位置排列,元素位于容器的结尾*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">align-content</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span><span class="token comment">/*元素在交叉轴居中显示(结合justify-content:center可以水平垂直居中)*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">align-content</span><span class="token punctuation">:</span>space-between<span class="token punctuation">;</span>
<span class="token comment">/*结合justify-content:space-between.
各行在弹性盒容器中平均分布,子元素与子元素的间隙是相同的
*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">align-content</span><span class="token punctuation">:</span>space-around<span class="token punctuation">;</span>
<span class="token comment">/*结合justify-content:space-around元素与元素之间的间隙都一样*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">align-content</span><span class="token punctuation">:</span>space-evenly<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>2.主轴每一个元素在交叉轴方向上的排列布局方式</strong></p> <p>​	<strong>align-items</strong></p> <blockquote><p><strong>strech(默认值) 自动把元素拉伸成容器的高度,</strong></p> <p><strong>flex-start交叉轴的起点对齐。</strong></p> <p><strong>flex-end 交叉轴的终点对齐</strong></p> <p><strong>center交叉轴的中点对齐</strong></p> <p><strong>baseline基线对齐</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">&lt;div class=&quot;bigbox&quot;&gt;
		&lt;div class=&quot;smallbox h130&quot;&gt;1&lt;/div&gt;
		&lt;div class=&quot;smallbox &quot;&gt;2&lt;/div&gt;
		&lt;div class=&quot;smallbox h150&quot;&gt;3&lt;/div&gt;
		&lt;div class=&quot;smallbox &quot;&gt;4&lt;/div&gt;
		&lt;div class=&quot;smallbox h200&quot;&gt;5&lt;/div&gt;
		&lt;div class=&quot;smallbox&quot;&gt;6&lt;/div&gt;
		&lt;div class=&quot;smallbox&quot;&gt;7&lt;/div&gt;
		&lt;div class=&quot;smallbox&quot;&gt;8&lt;/div&gt;
	&lt;/div&gt;
.bigbox</span><span class="token punctuation">{</span>
			<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
			<span class="token property">flex-direction</span><span class="token punctuation">:</span>row<span class="token punctuation">;</span>
			<span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
			<span class="token property">justify-content</span><span class="token punctuation">:</span>space-between<span class="token punctuation">;</span>
			<span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
			<span class="token property">align-items</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span>100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.smallbox</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 10px black inset<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.h150</span><span class="token punctuation">{</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.h130</span><span class="token punctuation">{</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 130px<span class="token punctuation">;</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.h200</span><span class="token punctuation">{</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><p><strong>总结:</strong></p> <p>​	<strong>弹性盒模型(父元素控制子元素的整体口号)</strong></p> <p><strong>1.主轴  交叉轴</strong></p> <p><strong>2,元素在主轴上的对齐方式  justify-content</strong></p> <p><strong>3.多行元素看成一个整体,这个整体在交叉轴的方向上的对齐方式 align-content</strong></p> <p><strong>4.单行主轴元素在交叉轴的对齐方式 align-items</strong></p> <hr> <h3 id="子元素的微调操作"><a href="#子元素的微调操作" class="header-anchor">#</a> 子元素的微调操作</h3> <p><strong>给子元素添加样式,作为子元素的微调</strong></p> <ul><li><strong>1.序号,排列顺序   oreder</strong></li></ul> <blockquote><p>我们之前学习前端的元素顺序时候1就是1,2就是2,1写在2前面就是写在2前面,没有办法修改,</p> <p><strong>css控制html结构的顺序</strong>,</p></blockquote> <p><strong>order值:,默认是0,</strong></p> <blockquote><p><strong>值越小越前面越大越后面</strong></p> <p><strong>order值一样根据代码书写顺序来,只能弹性盒子中</strong></p> <p><em>取值 只能是整数 可以为负数 0是默认 数值越大在越后面</em></p></blockquote> <p><strong>2.弹性盒子内的子元素的大小属性</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">&lt;div class=&quot;bigbox&quot;&gt;
		&lt;div class=&quot;smallbox&quot;&gt;1&lt;/div&gt;
		&lt;div class=&quot;smallbox&quot;&gt;2&lt;/div&gt;
		&lt;div class=&quot;smallbox&quot;&gt;3&lt;/div&gt;
		&lt;div class=&quot;smallbox&quot;&gt;4&lt;/div&gt;
	&lt;/div&gt;
.bigbox</span><span class="token punctuation">{</span>
			<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token comment">/*此时元素不换行,主轴默认朝右,右边有空余的区域,.
  		如果我们想这空出来的区域被这个盒子占满呢?*/</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span>100px auto 0<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.smallbox</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 10px black inset<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><ul><li><strong>盒子的膨胀系数  flex-grow: 默认都是0,只有当有多余空间可分配可设置</strong></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;div class=&quot;smallbox grow&quot;&gt;1&lt;/div&gt;
.grow</span><span class="token punctuation">{</span>
			<span class="token property">flex-grow</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
<span class="token comment">/*这地方写1默认把多出来的部分全部都分,写小数就相当于百分比,写2也相当于1*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;div class=&quot;smallbox grow&quot;&gt;1&lt;/div&gt;
&lt;div class=&quot;smallbox grow&quot;&gt;2&lt;/div&gt;
.grow</span><span class="token punctuation">{</span>
			<span class="token property">flex-grow</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span><span class="token comment">/*这两家会均分*/</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;div class=&quot;smallbox grow1&quot;&gt;1&lt;/div&gt;

&lt;div class=&quot;smallbox grow2&quot;&gt;2&lt;/div&gt;
grow1</span><span class="token punctuation">{</span>
	<span class="token property">flex-grow</span><span class="token punctuation">:</span>3<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token selector">grow2</span><span class="token punctuation">{</span>
	<span class="token property">flex-grow</span><span class="token punctuation">:</span>7<span class="token punctuation">;</span><span class="token comment">/*这两家会按比例分配*/</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>如果份数和小于1,就按百分比分,如果大于1,就全部分</strong></p> <p><strong>有富余才放大</strong></p> <p><strong>默认是0 设置越大拉伸越多</strong></p> <p>自己要多分的部分=总多出来的部分*(自己的份数/总份数)</p> <ul><li><strong>盒子的压缩比例</strong></li></ul> <p>​	<strong>flex-shrink 默认值是1;</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div class=<span class="token string">&quot;smallbox&quot;</span>&gt;5&lt;/div&gt;<span class="token comment">/*多加一个盒子*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.shrink0</span><span class="token punctuation">{</span>
			<span class="token property">flex-shrink</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;smallbox shrink0&quot;</span>&gt;2&lt;/div&gt;
<span class="token comment">/*此时不会缩小.随着宽度减少,每个元素都变得很小,它就不会减少*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.shrink2</span><span class="token punctuation">{</span>
			<span class="token property">flex-shrink</span><span class="token punctuation">:</span>2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;div class=<span class="token string">&quot;smallbox shrink0&quot;</span>&gt;2&lt;/div&gt;	
<span class="token comment">/*此时shrink:2的元素会比shrnk1的元素收缩值大两倍*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>自己的捐献的部分 = 总的缺失部分*(自己的捐献系数/总的捐献系数)</p> <ul><li><p><strong>flex-basis属性定义了在分配多余空间之前,子元素占据的主轴空间</strong></p> <blockquote><p><strong>用长度值来定义宽度。不允许负值</strong></p> <p><strong>用百分比来定义宽度。不允许负值</strong></p> <p><strong>content:基于内容自动计算宽度</strong></p> <p><strong>auto:检索你是否设置了width/height值,没有就使用content</strong></p></blockquote></li></ul> <p>这三个数膨胀和压缩系数和felx-basis基准值可以合并到一起</p> <p><strong>flex属性是 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。</strong></p> <blockquote><p>auto: 计算值为 1 1 auto</p> <p>initial: 计算值为 0 1 auto</p> <p>none：计算值为 0 0 auto</p> <p>inherit：从父元素继承</p></blockquote> <p><strong>flex:none  当盒子变小时不会压缩,变大的话也不会拉伸,相当于我们物理学的刚体,不屈不挠,不会变通的一个盒子</strong></p> <p><strong>flex:auto   缩小盒子时等比例缩小,放大盒子也会拉伸</strong></p> <h3 id="align-self子元素覆盖的对齐方式"><a href="#align-self子元素覆盖的对齐方式" class="header-anchor">#</a> align-self子元素覆盖的对齐方式</h3> <blockquote><p>align-self用于设置单个弹性子元素在交叉轴上的对齐方式 可以覆盖align-items</p></blockquote> <h3 id="flex兼容性"><a href="#flex兼容性" class="header-anchor">#</a> flex兼容性</h3> <p><strong>1.旧版本的flex写法只支持旧的语法书写</strong></p> <ol><li>最早: display:box;</li> <li>过渡: display:flex-box;</li> <li>当今标准 display:flex;</li></ol> <p><strong>2.为了兼容老版本的游览器</strong></p> <p>需要添加游览器兼容前缀   如-webkit-</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="prev">
        14-3D盒阴影和遮罩
      </a></span> <span class="next"><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html">
        16-阿里图标 组件化 swiper
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/30.c4a099d1.js" defer></script>
  </body>
</html>
